import { useRequest } from 'umi';
import { Row, Col, Statistic, Card, Button } from 'antd';
import ProTable, { ProColumns } from '@ant-design/pro-table';
import { Radar, Line } from '@ant-design/charts';

import {
    fakeRadarChartData,
    fakeLineChartData,
    fakeKnowledgeListData,
} from './service';

import { uniqueId } from 'lodash';
import moment from 'moment';

import styles from './index.less';
import {getAuthorizationApplyListRequestData} from "@/pages/KnowledgeApply/service";
import {useEffect, useState} from "react";
import AApplyList from "@/pages/KnowledgeApply/components/ApplyList";

const StatisticContent = () => {
    return (
        <Row className={styles.statisticContent}>
            <Col className={styles.item} span={4}>
                <Statistic title="平台排名" value={8} suffix="/ 24" />
            </Col>
            <Col className={styles.item} span={4}>
                <Statistic title="访问次数" value={98} />
            </Col>
            <Col className={styles.item} span={4}>
                <Statistic title="收藏量" value={35} />
            </Col>
            <Col className={styles.item} span={4}>
                <Statistic title="应用量" value={1298} />
            </Col>
            <Col className={styles.item} span={4}>
                <Statistic title="访问次数" value={1298} />
            </Col>
            <Col className={styles.item} span={4}>
                <Statistic title="访问量" value={1298} />
            </Col>
        </Row>
    );
};

// 我的成就
const MyAchievement = () => {
    const { data } = useRequest(fakeRadarChartData);

    return (
        <Card
            title="我的成就"
            bordered={false}
            loading={data?.length === 0}
            headStyle={{ paddingLeft: 0 }}
            bodyStyle={{ padding: 20 }}
        >
            <div className={styles.chart}>
                <Radar
                    data={data ?? []}
                    xField="label"
                    yField="value"
                    seriesField="name"
                    meta={{
                        score: {
                            alias: '分数',
                            min: 0,
                            max: 80,
                        },
                    }}
                    xAxis={{
                        line: null,
                        tickLine: null,
                        grid: {
                            line: {
                                style: {
                                    lineDash: null,
                                },
                            },
                        },
                    }}
                    yAxis={{
                        line: null,
                        tickLine: null,
                        grid: {
                            line: {
                                type: 'line',
                                style: {
                                    lineDash: null,
                                },
                            },
                        },
                    }}
                    // 开启辅助点
                    point={{
                        size: 2,
                    }}
                    legend={{
                        position: 'bottom',
                        padding: [20, 0, 0, 0],
                    }}
                />
            </div>
        </Card>
    );
};

// 访客统计
const Guest = () => {
    const { data } = useRequest(fakeLineChartData);

    return (
        <Card
            title="访客统计"
            bordered={false}
            loading={data?.length === 0}
            headStyle={{ paddingLeft: 0 }}
            bodyStyle={{ padding: 20 }}
        >
            <div className={styles.chart}>
                <Line
                    data={data ?? []}
                    xField="date"
                    yField="value"
                    yAxis={{
                        label: {
                            formatter: (v) =>
                                `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
                        },
                    }}
                    seriesField="type"
                    interactions={[
                        {
                            type: 'slider',
                            cfg: {},
                        },
                    ]}
                    legend={{
                        position: 'top',
                    }}
                    slider={{
                        start: 0.1,
                        end: 0.6,
                        padding: [20, 0, 0, 0],
                        height: 24,
                        textStyle: { color: 'transparent' },
                    }}
                ></Line>
            </div>
        </Card>
    );
};

// 最新申请
const ApplyList = () => {
    const [ data,setData ] = useState<AircasKB.KnowledgeApply.AuthorizationApplyListResponse[]>([]);

    const getAuthorizationApplyListRequest = async () => {
        const res:AircasKB.ResponseType<AircasKB.KnowledgeApply.AuthorizationApplyListResponse[]> = await getAuthorizationApplyListRequestData();
        if(res.code == 200){
            setData(res.data);
        }
    }

    useEffect(()=>{
        getAuthorizationApplyListRequest();
    },[])
    return (
        <Card
            title="最新申请"
            bordered={false}
            loading={data?.length === 0}
            headStyle={{ paddingLeft: 0 }}
            bodyStyle={{ padding: 0 }}
            extra={
                <Button size="small" type="link">
                    更多&nbsp;&gt;&gt;
                </Button>
            }
        >
            <AApplyList data={data}/>
        </Card>
    );
};

// 正在进行
// @ts-ignore
const KnowledgeList = () => {
    const { data } = useRequest(fakeKnowledgeListData);
    const columns: ProColumns<any>[] = [
        {
            dataIndex: 'title',
            title: '知识标题',
            ellipsis: true,
        },
        {
            dataIndex: 'lastUpdate',
            title: '最后修改时间',
            sorter: true,
            width: 150,
            align: 'center',
            render: (_: any) => moment(_).format('YYYY-MM-DD'),
        },
        {
            title: '状态',
            dataIndex: 'state',
            sorter: true,
            width: 120,
            align: 'center',
            render: (_, record) => {
                return '待审核';
            },
        },
    ];
    return (
        <Card
            title="正在进行"
            bordered={false}
            loading={data?.length === 0}
            headStyle={{ paddingLeft: 0 }}
            bodyStyle={{ padding: 0 }}
            extra={
                <Button size="small" type="link">
                    更多&nbsp;&gt;&gt;
                </Button>
            }
        >
            <ProTable
                className={styles.simpleTable}
                bordered
                search={false}
                options={false}
                rowKey={() => uniqueId()}
                columns={columns}
                pagination={false}
                dataSource={data ?? []}
            ></ProTable>
        </Card>
    );
};

const DashboardHome = () => {



    return (
        <div className={styles.wrapper}>
            <StatisticContent />
            <Row gutter={[48, 12]} style={{ padding: '10px 20px' }}>
                <Col span={8}>
                    <MyAchievement />
                </Col>
                <Col span={16}>
                    <Guest />
                </Col>
            </Row>
            <Row gutter={[48, 12]} style={{ padding: '10px 20px' }}>
                <Col span={12}>
                    <ApplyList/>
                </Col>
                <Col span={12}>
                    <KnowledgeList/>
                </Col>
            </Row>
        </div>
    );
};

export default DashboardHome;
